<template>
	<view class="container">
		<uni-card title="阀门详情" :is-shadow="true" margin="20rpx" class="full-height-card">
			<view class="card-content">
				<template v-if="valve">
					<view class="header-info">
						<view class="valve-id">阀门编号: {{ valve.id }}</view>
						<uni-tag :text="valve.status" :type="getStatusType(valve.status)" size="small" />
					</view>
					
					<!-- 标识信息 -->
					<uni-section title="标识信息" type="line" padding>
						<view class="info-section">
							<view class="info-item">
								<text class="info-label">阀门名称</text>
								<text class="info-value">{{valve.name}}</text>
							</view>
							<view class="info-item">
								<text class="info-label">设备类型</text>
								<text class="info-value">{{valve.type}}</text>
							</view>
							<view class="info-item">
								<text class="info-label">使用状态</text>
								<text class="info-value">{{valve.status}}</text>
							</view>
						</view>
					</uni-section>
					
					<!-- 技术规格参数 -->
					<uni-section title="技术规格参数" type="line" padding>
						<view class="info-section">
							<view class="info-item">
								<text class="info-label">型号规格</text>
								<text class="info-value">{{valve.model}}</text>
							</view>
							<view class="info-item">
								<text class="info-label">口径</text>
								<text class="info-value">{{valve.diameter}} mm</text>
							</view>
							<view class="info-item">
								<text class="info-label">阀体材质</text>
								<text class="info-value">{{valve.material}}</text>
							</view>
							<view class="info-item">
								<text class="info-label">压力等级</text>
								<text class="info-value">{{valve.pressureLevel}}</text>
							</view>
							<view class="info-item">
								<text class="info-label">驱动方式</text>
								<text class="info-value">{{valve.drivingMode}}</text>
							</view>
						</view>
					</uni-section>
					
					<!-- 安装位置信息 -->
					<uni-section title="安装位置信息" type="line" padding>
						<view class="info-section">
							<view class="info-item">
								<text class="info-label">安装区域</text>
								<text class="info-value">{{valve.area}}</text>
							</view>
							<view class="info-item">
								<text class="info-label">具体位置</text>
								<text class="info-value">{{valve.location}}</text>
							</view>
							<view class="info-item">
								<text class="info-label">管网位置</text>
								<text class="info-value">{{valve.networkLocation}}</text>
							</view>
							<view class="info-item">
								<text class="info-label">安装日期</text>
								<text class="info-value">{{valve.installDate}}</text>
							</view>
						</view>
					</uni-section>
					
					<!-- 制造商与供应商信息 -->
					<uni-section title="制造商与供应商信息" type="line" padding>
						<view class="info-section">
							<view class="info-item">
								<text class="info-label">制造商</text>
								<text class="info-value">{{valve.manufacturer}}</text>
							</view>
							<view class="info-item">
								<text class="info-label">供应商</text>
								<text class="info-value">{{valve.supplier}}</text>
							</view>
							<view class="info-item">
								<text class="info-label">联系人</text>
								<text class="info-value">{{valve.contact}}</text>
							</view>
							<view class="info-item">
								<text class="info-label">联系电话</text>
								<text class="info-value">{{valve.contactPhone}}</text>
							</view>
						</view>
					</uni-section>
					
					<view class="action-buttons">
						<button type="primary" @click="editValve">编辑信息</button>
						<button type="default" @click="goBack">返回</button>
					</view>
				</template>
				
				<view v-else class="empty-data">
					<uni-icons type="info" size="50" color="#ccc"></uni-icons>
					<text>阀门信息加载中或不存在</text>
				</view>
			</view>
		</uni-card>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				valveId: '',
				valve: null,
				valveList: [
					{
						id: 'V001',
						name: '进水主阀',
						type: '闸阀',
						status: '正常',
						model: 'Z45X-16Q',
						diameter: 200,
						material: '球墨铸铁',
						pressureLevel: 'PN16',
						drivingMode: '手动',
						area: '水厂一区',
						location: '进水泵房东侧',
						networkLocation: '主管网节点A12',
						installDate: '2022-05-15',
						manufacturer: '上海XX阀门制造有限公司',
						supplier: '北京XX设备有限公司',
						contact: '张工',
						contactPhone: '13812345678'
					},
					{
						id: 'V002',
						name: '出水控制阀',
						type: '蝶阀',
						status: '维护中',
						model: 'D343H-16C',
						diameter: 150,
						material: '不锈钢',
						pressureLevel: 'PN10',
						drivingMode: '电动',
						area: '水厂二区',
						location: '出水泵房西侧',
						networkLocation: '配水管网节点B08',
						installDate: '2022-06-20',
						manufacturer: '北京XX阀门制造有限公司',
						supplier: '北京XX设备有限公司',
						contact: '李工',
						contactPhone: '13987654321'
					},
					{
						id: 'V003',
						name: '旁通控制阀',
						type: '球阀',
						status: '故障',
						model: 'Q41F-16P',
						diameter: 100,
						material: '不锈钢',
						pressureLevel: 'PN16',
						drivingMode: '气动',
						area: '水厂三区',
						location: '配水间南侧',
						networkLocation: '支管网节点C05',
						installDate: '2022-07-10',
						manufacturer: '天津XX阀门制造有限公司',
						supplier: '天津XX设备有限公司',
						contact: '王工',
						contactPhone: '13756781234'
					}
				]
			}
		},
		onLoad(options) {
			if (options.id) {
				this.valveId = options.id;
				this.loadValveData();
			}
		},
		methods: {
			loadValveData() {
				// 在实际应用中，这里应该通过API获取阀门数据
				// 这里使用模拟数据
				this.valve = this.valveList.find(v => v.id === this.valveId);
				
				if (!this.valve) {
					uni.showToast({
						title: '阀门数据不存在',
						icon: 'none'
					});
					setTimeout(() => {
						uni.navigateBack();
					}, 1500);
				}
			},
			getStatusType(status) {
				switch(status) {
					case '正常':
						return 'success';
					case '维护中':
						return 'warning';
					case '故障':
						return 'error';
					default:
						return 'default';
				}
			},
			editValve() {
				uni.navigateTo({
					url: `/pages/valve-management/valve-form?mode=edit&id=${this.valveId}`
				});
			},
			goBack() {
				uni.navigateBack();
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
		height: 100%;
	}
	
	.container {
		padding-bottom: 0;
		min-height: 100vh;
	}
	
	.full-height-card {
		min-height: calc(100vh - 140rpx);
		margin-bottom: 0 !important;
		box-shadow: none !important;
		
		:deep(.uni-card__content) {
			padding-bottom: 50rpx;
		}
	}
	
	.card-content {
		padding: 10rpx 0;
	}
	
	.header-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 30rpx;
		margin-bottom: 20rpx;
		background-color: #f8f8f8;
		border-radius: 8rpx;
	}
	
	.valve-id {
		font-size: 32rpx;
		font-weight: bold;
		color: #3A8CFF;
	}
	
	.empty-data {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 100rpx 0;
		color: #999;
		
		text {
			margin-top: 20rpx;
			font-size: 28rpx;
		}
	}
	
	.action-buttons {
		display: flex;
		justify-content: space-around;
		padding: 40rpx 20rpx 20rpx;
		
		.button {
			width: 40%;
		}
	}
	
	.info-section {
		background-color: #fff;
		border-radius: 8rpx;
	}
	
	.info-item {
		display: flex;
		justify-content: space-between;
		padding: 24rpx 20rpx;
		border-bottom: 1px solid #eee;
	}
	
	.info-item:last-child {
		border-bottom: none;
	}
	
	.info-label {
		color: #606266;
		font-size: 28rpx;
	}
	
	.info-value {
		color: #303133;
		font-size: 28rpx;
		max-width: 65%;
		text-align: right;
	}
</style> 